<template>
	<div>
		<el-form :model="queryForm" label-width="60px" :inline="true">
			<el-form-item>
				<el-input v-model="queryForm.title" clearable placeholder="标题"/>
			</el-form-item>
		  <el-form-item>
			<el-button type="primary" @click="init()">查询</el-button>
		  </el-form-item>
		</el-form>
	</div>
	
	<div style="margin-top: 1%;">
	<el-table :data="tableData" style="width: 100%;" stripe border highlight-current-row size="large">
	  <el-table-column prop="title" label="帖子标题" />
	  <el-table-column prop="coverImage" label="封面图" >
		<template #default="scope">
			<el-image :src="imageBaseUrl + scope.row.coverImage" style="width: 100%;" fit="contain" :preview-src-list="[imageBaseUrl + scope.row.coverImage]" preview-teleported/>
		</template>
	  </el-table-column>
	  <el-table-column prop="state" label="状态" :formatter="stateFormatter"/>
	  <el-table-column prop="views" label="浏览次数"/>
	  <el-table-column prop="createTime" label="发布时间" min-width="110" :formatter="formatterTime"/>
	  <el-table-column prop="updateTime" label="修改时间" min-width="110" :formatter="formatterTime"/>
	  <el-table-column label="操作" width="300">
	    <template #default="scope">
	  	<el-button size="small" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
		<el-button size="small" @click="handleExamine(scope.$index, scope.row)">审核</el-button>
		<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
		<el-button size="small" @click="handleComment(scope.row.id)">查看评论</el-button>
	    </template>
	  </el-table-column>
	</el-table>
	<el-pagination background layout="total, sizes, prev, pager, next" style="margin-top: 2%;"
		:page-sizes="[10, 20, 50]"
		@size-change="init"
		@current-change="init"
		v-model:page-size="queryForm.pageSize"
		v-model:current-page="queryForm.page"
		:total="totalData"
	/>
	</div>

<el-dialog v-model="detailDialog" title="帖子详情" destroy-on-close fullscreen>
  <el-form :model="detailForm">
	<el-form-item label="标题" prop="title" :label-width="formLabelWidth">
	  <el-input v-model="detailForm.title" disabled/>
	</el-form-item>
	<el-form-item prop="coverImage" label="封面图" :label-width="formLabelWidth">
		<el-image style="height: 200px;" :src="imageBaseUrl + detailForm.coverImage" fit="fill" :preview-src-list="[imageBaseUrl + detailForm.coverImage]"/>
	</el-form-item>
	<el-form-item label="内容" prop="content" :label-width="formLabelWidth">
	  <div v-html="detailForm.content" style="max-height: 500px; overflow-y: auto;"></div>
	</el-form-item>
	<el-form-item label="发布时间" prop="createTime" :label-width="formLabelWidth">
	  <el-input v-model="detailForm.createTime" disabled />
	</el-form-item>
	<el-form-item label="修改时间" prop="updateTime" :label-width="formLabelWidth">
	  <el-input v-model="detailForm.updateTime" disabled/>
	</el-form-item>
  </el-form>
</el-dialog>

<el-dialog v-model="examineDialog" title="帖子审核" destroy-on-close fullscreen>
  <el-form :model="examineForm">
	<el-form-item label="标题" prop="title" :label-width="formLabelWidth">
	  <el-input v-model="examineForm.title" disabled/>
	</el-form-item>
	<el-form-item prop="coverImage" label="封面图" :label-width="formLabelWidth">
		<el-image style="height: 200px;" :src="imageBaseUrl + examineForm.coverImage" fit="fill" :preview-src-list="[imageBaseUrl + examineForm.coverImage]"/>
	</el-form-item>
	<el-form-item label="内容" prop="content" :label-width="formLabelWidth">
	  <div v-html="examineForm.content" style="max-height: 500px; overflow-y: auto;"></div>
	</el-form-item>
	<el-form-item label="发布时间" prop="createTime" :label-width="formLabelWidth">
	  <el-input v-model="examineForm.createTime" disabled />
	</el-form-item>
	<el-form-item label="修改时间" prop="updateTime" :label-width="formLabelWidth">
	  <el-input v-model="examineForm.updateTime" disabled/>
	</el-form-item>
  </el-form>
  <template #footer>
        <div class="dialog-footer">
          <el-button @click="examine(2)">审核不通过</el-button>
          <el-button type="primary" @click="examine(1)">
  			审核通过
          </el-button>
        </div>
      </template>
</el-dialog>

<el-dialog v-model="commentDialog" title="帖子评论">
  <el-table :data="commentData" style="width: 100%;" max-height="600" stripe border highlight-current-row size="large">
    <el-table-column prop="userName" label="姓名" />
    <el-table-column prop="content" label="评论内容" />
    <el-table-column prop="createTime" label="评论时间" min-width="120" :formatter="formatterTime"/>
	<el-table-column label="操作">
	  <template #default="scope">
			<el-button size="small" type="danger" @click="handleCommentDelete(scope.row.id)">删除</el-button>
	  </template>
	</el-table-column>
  </el-table>
</el-dialog>

</template>

<script setup>
import { getCurrentInstance, reactive, ref } from "vue"
import { imageBaseUrl, formatterTime } from "@/global/index.js"
const { proxy } = getCurrentInstance()

const queryForm = reactive({})
const totalData = ref(0)

//详情
const detailDialog = ref(false)
const detailForm = reactive({})

const formLabelWidth = ref(80);


let tableData = ref([]);
const init = async () => {
	let params = Object.assign({}, queryForm);
	let result = await proxy.axios.post('forum/list', params)
	if (!result) {
	  return;
	}
	tableData.value = result.list;
	totalData.value = result.total;
}
init();

const handleDetail = (idx, rowData) => {
	Object.assign(detailForm, rowData)
	detailDialog.value = true
}

let examineDialog = ref(false)
let examineForm = reactive({})
const handleExamine = (idx, rowData) => {
	Object.assign(examineForm, rowData)
	examineDialog.value = true
}
const examine = async(state) => {
	let result = await proxy.axios.get('forum/examine?id=' + examineForm.id + '&state=' + state)
	if (!result) {
	  return
	}
	proxy.msg.success('审核处理成功')
	examineDialog.value = false
	init()
}

const handleDelete = async (idx, rowData) => {
	ElMessageBox.confirm(
	    '确定要删除吗?',
	    'Warning',
	    {
	      confirmButtonText: '确认',
	      cancelButtonText: '取消',
	      type: 'warning',
	    }
	  )
		.then(() => {
			doDelete(rowData.id)
		})
}
const doDelete = async (id) => {
	let result = await proxy.axios.get('forum/delete?id=' + id)
	if (!result) {
	  return
	}
	proxy.msg.success('删除成功')
	init()
}

const handleCommentDelete = async (id) => {
	ElMessageBox.confirm(
	    '确定要删除吗?',
	    'Warning',
	    {
	      confirmButtonText: '确认',
	      cancelButtonText: '取消',
	      type: 'warning',
	    }
	  )
		.then(() => {
			doCommentDelete(id)
		})
}
let commentForumId
const doCommentDelete = async (id) => {
	let result = await proxy.axios.get('forumComment/delete?id=' + id)
	if (!result) {
	  return
	}
	proxy.msg.success('删除成功')
	handleComment(commentForumId)
}

let commentData = ref([])
let commentDialog = ref(false)
const handleComment = async (forumId) => {
	let result = await proxy.axios.get('forumComment/list?forumId=' + forumId)
	commentData.value = result
	commentDialog.value = true
	commentForumId = forumId
}

const stateFormatter = (row, column, cellValue, index) => {
	if (cellValue === 0) {
		return '审核中'
	}
	if (cellValue === 1) {
		return '审核通过'
	}
	if (cellValue === 2) {
		return '审核拒绝'
	}
	return '未知状态'
}

</script>

<style>
</style>